// 发表文章
// const BASE_URL = 'http://api-breakingnews-web.itheima.net'

// 获取类别
articleCates(res => {
  res.data.data.forEach(v => {
    let theOption = `<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
    $('select').append(theOption)
  })
  // 表单里面动态渲染元素
  // 意思：重新刷新edit容器里面的select元素
  layui.form.render('select', 'edit')
})

// 初始化富文本
initEditor()

// 封面图片
// 初始化剪裁工具
let cropper
function initCropper() {
  // 集成剪裁插件
  const image = document.getElementById('image') // 获取到要被添加裁剪的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 纵横比例
    preview: $('.img-preview')
  })
}
initCropper()
// 点击封面触发input:file的click事件
$('.select').on('click', function () {
  $('#file').click()
})
$('#file').on('change', function () {
  let url = URL.createObjectURL(this.files[0])
  cropper.replace(url)
})

// 确认添加
$('.layui-form').on('submit', function (e) {
  e.preventDefault()

  let fd = new FormData(document.querySelector('form'))

  let htmlStr = tinyMCE.activeEditor.getContent()
  fd.set('content', htmlStr)

  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100
  })
  canvas.toBlob(function (blobObj) {
    fd.append('cover_img', blobObj)

    articleAdd(fd, res => {
      let { status, message } = res.data
      if (status === 0) {
        successMsg(message, () => {
          location.href = '../list/list.html'
        })
      }
    })
  })
})
